<template>
	<view style="position: relative;min-height: 100vh;">

		<!-- #ifdef H5 -->
		<!-- <k-navbar :showBack="false" title=""></k-navbar> -->
		<!-- <view style="position: absolute;right: 0;bottom: 100rpx;z-index: 999;display: flex;flex-direction: column;">
			<image @click="toPath('/pages/game/record')" style="width: 140rpx;"
				src="../../static/game/ic_battle_royal_logs.png" mode="widthFix"></image>
			<image @click="toPath('/pages/game/rank_list')" style="width: 140rpx;"
				src="../../static/game/ic_battle_royal_rank.png" mode="widthFix"></image>
		</view> -->
		<!-- #endif -->

		<web-view v-if="to_url" ref="webview" @message="onMessage" :webview-styles="webviewStyles" :src="to_url"
			:progress="true"></web-view>

	</view>
</template>

<script>
import {
	requestGet,
	requestPost
} from '../common/util.js'
export default {
	data() {
		return {
			to_url: '',
			webviewStyles: {
				progress: {
					color: '#FF3333'
				}
			},
			loadingCompleted: false,

			countdownMusic: null,
			killerKnifeMusic: null,
			bgmMusic: null,
			killedMusic: null,
		}
	},
	onShow() {
		setTimeout(() => {
			this.$nextTick(() => {
				this.audioStart(this.bgmMusic, true)
			})
		}, 1000)
	},
	onHide() {
		this.audioPause(this.countdownMusic)
		this.audioPause(this.killerKnifeMusic)
		this.audioPause(this.bgmMusic)
		this.audioPause(this.killedMusic)
	},
	onLoad(e) {
		let from = 'app'
		// #ifdef H5
		from = 'h5'
		// #endif

		// if (e.token) {
		// 	uni.setStorageSync('token', e.token)
		// }
		uni.setStorageSync('token', this.$comFun.getUserToken());
		uni.setStorageSync('lang', 'zh')
		let params = {
			token: uni.getStorageSync('token'),
			safe_top: this.$gameStore.safe_top || 20,
			lang: uni.getStorageSync('lang'),
			dtsgame_from: from,
			// t: new Date().getTime()
		}
		console.log('params', params)

		let urlObj = {
			localhost: 'http://192.168.31.167:3000/',
			development: 'http://47.107.89.186:8085/',
			// development: 'http://192.168.31.186:8180/',
			production: 'https://chatter-hunt-game.lishangshenghuowang.com/',
		}

		let url = urlObj[this.$comFun.NODE_ENV];
		// let url = urlObj.localhost;

		this.to_url = url + '?p=' + encodeURIComponent(JSON.stringify(params))
		console.log(this.to_url);
		// this.to_url = 'http://localhost:3000?p=' + encodeURIComponent(JSON.stringify(params))
	},
	onUnload() {
		console.log('onUnload')
		this.destroyAudio()
	},
	created() {
		this.initAudio()
	},
	methods: {
		close() {
			let routes = getCurrentPages();
			console.log('routes length=>>>>', routes.length)
			// let curRoute = routes[routes.length - 1].route
			uni.navigateBack({
				delta: routes.length - 1,
				url: '/pages/ecology/index',
				animationType: 'slide-out-bottom'
			})
		},

		destroyAudio() {
			this.countdownMusic.destroy()
			this.killerKnifeMusic.destroy()
			this.bgmMusic.destroy()
			this.killedMusic.destroy()
		},
		initAudio() {
			this.countdownMusic = uni.createInnerAudioContext();
			this.countdownMusic.src = 'https://file.chatter.lishangshenghuowang.com/game/countdownMusic.mp3'
			// this.countdownMusic.src = '/pages/gamewt/static/game/countdownMusic.mp3'

			this.killerKnifeMusic = uni.createInnerAudioContext();
			this.killerKnifeMusic.src = 'https://file.chatter.lishangshenghuowang.com/game/killer_wield_knife.mp3'
			// this.killerKnifeMusic.src = '/pages/gamewt/static/game/killer_wield_knife.mp3'

			this.bgmMusic = uni.createInnerAudioContext();
			this.bgmMusic.src = 'https://file.chatter.lishangshenghuowang.com/game/killBGM_1.mp3'
			// this.bgmMusic.src = 'pages/gamewt/static/game/killBGM.mp3'
			// this.bgmMusic.src = plus.io.convertLocalFileSystemURL("/pages/gamewt/static/game/killBGM.mp3")

			this.killedMusic = uni.createInnerAudioContext();
			this.killedMusic.src = 'https://file.chatter.lishangshenghuowang.com/game/killed.mp3'
			// this.killedMusic.src = '/pages/gamewt/static/game/killed.mp3'
		},

		audioStart(audioContext, loop) {
			audioContext.loop = loop
			audioContext.play()
		},
		audioStop(audioContext) {
			audioContext.stop()
		},
		audioPause(audioContext) {
			audioContext.pause()
		},

		onMessage(e) {
			console.log('onMessage==>', e)
			let message = e.detail.data[0]

			if (message.action == 'loadingCompleted') {
				this.loadingCompleted = true
				if (!this.bgmMusic) {
					this.audioStart(this.bgmMusic, true)
				}
				return;
			}
			if (message.action == 'close') {
				this.close()
				return;
			}

			if (message.action == 'toRecord') {
				this.toPath('/pages/gameDts/page/record')
				return;
			}
			if (message.action == 'toRank') {
				this.toPath('/pages/gameDts/page/rank_list')
				return;
			}
			if (message.action == 'toRule') {
				this.toPath('/pages/gameDts/page/rule')
				return;
			}

			let audioContext = this[message.audioContext]
			if (audioContext) {
				if (message.action == 'play') {
					this.audioStart(audioContext, message.loop)
				}
				if (message.action == 'pause') {
					this.audioPause(audioContext)
				}
				if (message.action == 'stop') {
					this.audioStop(audioContext)
				}
			}
		},
	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #000;
}

.capsule {
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 10rpx;
	box-sizing: border-box;
	width: 140rpx;
	height: 50rpx;
	background-color: #0000004D;
	position: absolute;
	right: 50rpx;
	top: 100rpx;
	z-index: 9999;
	border-radius: 50rpx;
}
</style>